<template>
  <view>
    <view class="flex-col justify-start page">
      <view class="flex-col justify-start relative section">
        <view class="flex-col justify-start section_2">
          <view class="flex-col section_3">
            <image
              class="shrink-0 self-end image_3"
              src="@/static/images/bg/1.png"
            />
            <view
              class="flex-col justify-start items-start self-stretch relative group"
            >
              <image class="image_7" src="@/static/images/bg/2.png" />
              <image class="image_4 pos_3" src="@/static/images/bg/3.png" />
            </view>
          </view>
        </view>
        <view class="flex-col justify-start items-center image-wrapper pos">
          <image class="image" src="@/static/images/bg/4.png" />
        </view>
        <view class="flex-row justify-between group_2 pos_4">
          <view
            class="flex-col justify-start items-center self-start relative group_3"
          >
            <image class="image_5" src="@/static/images/bg/5.png" />
            <image class="image_8 pos_5" src="@/static/images/bg/6.png" />
          </view>
          <view class="flex-col justify-start items-center relative group_4">
            <image class="image_6" src="@/static/images/bg/7.png" />
            <image class="image_9 pos_6" src="@/static/images/bg/8.png" />
          </view>
        </view>
        <image class="shrink-0 image_2 pos_2" src="@/static/images/bg/9.png" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #fefff9;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding-bottom: 636rpx;
  overflow: hidden;
  background-color: #fffffa;
}
.section_2 {
  padding-bottom: 120rpx;
  background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
}
.section_3 {
  padding: 48rpx 0 600rpx;
  background-image: url("@/static/images/bg/10.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 1236rpx;
}
.image_3 {
  width: 428rpx;
  height: 404rpx;
}
.group {
  margin-top: -256rpx;
  padding: 160rpx 0 48rpx;
}
.image_7 {
  width: 130rpx;
  height: 232rpx;
}
.image_4 {
  width: 350rpx;
  height: 440rpx;
}
.pos_3 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.image-wrapper {
  opacity: 0.73;
  background-image: url("@/static/images/bg/11.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image {
  width: 100vw;
  height: 265.6vw;
}
.group_2 {
  opacity: 0.5;
  overflow: hidden;
}
.pos_4 {
  position: absolute;
  left: 0;
  right: 0;
  top: 343.44rpx;
}
.group_3 {
  padding-bottom: 40rpx;
  width: 210rpx;
}
.image_5 {
  width: 210rpx;
  height: 350rpx;
}
.image_8 {
  width: 142rpx;
  height: 238rpx;
}
.pos_5 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.group_4 {
  padding-bottom: 64rpx;
  width: 248rpx;
}
.image_6 {
  width: 248rpx;
  height: 574rpx;
}
.image_9 {
  width: 137.98rpx;
  height: 390rpx;
}
.pos_6 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.image_2 {
  opacity: 0.6;
  mix-blend-mode: MULTIPLY;
  width: 100vw;
  height: 265.6vw;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
